<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm register-container">
      <h3  class="title">用户注册</h3>


<!--      <el-row :gutter="10">-->
<!--        <el-col :span="10"  >-->
<!--          <el-form-item prop="name">-->
<!--            <el-input type="text" v-model="ruleForm.name"  auto-complete="off" placeholder="名字"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="10" :offset="4">-->
<!--          <el-form-item prop="sex">-->
<!--            <el-select v-model="ruleForm.sex" placeholder="性别">-->
<!--              <el-option label="男" value="男"></el-option>-->
<!--              <el-option label="女" value="女"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row :gutter="10">-->
<!--        <el-col :span="10">-->
<!--          <el-form-item prop="username">-->
<!--            <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="10" :offset="4">-->
<!--          <el-form-item prop="password">-->
<!--            <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row :gutter="10">-->
<!--        <el-col :span="10" >-->
<!--          <el-form-item prop="company">-->
<!--            <el-input type="text" v-model="ruleForm.company" auto-complete="off" placeholder="公司"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="10" :offset="4">-->
<!--          <el-form-item prop="phone">-->
<!--            <el-input type="text" v-model="ruleForm.phone" auto-complete="off" placeholder="电话"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row :gutter="10">-->
<!--        <el-col :span="10">-->
<!--          <el-form-item prop="mail">-->
<!--            <el-input type="text" v-model="ruleForm.mail" auto-complete="off" placeholder="邮箱"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      -->

      <!-- 编辑界面 -->
        <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
          <el-form-item label="用户名" prop="username">
            <el-input size="small" v-model="editForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input size="small" v-model="editForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>

<!--          <el-form-item label="部门" prop="dept">-->
<!--            <el-select size="small" v-model="editForm.dept" placeholder="请选择您的部门" >-->
<!--              <el-option v-for="type in deptdata" :label="type.name" :value="type.id" :key="type.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->

          <el-form-item label="手机号" prop="phone">
            <el-input size="small" v-model="editForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮件" prop="mail">
            <el-input size="small" v-model="editForm.mail" placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="editForm.sex" label="男">男</el-radio>
            <el-radio v-model="editForm.sex" label="女">女</el-radio>
          </el-form-item>
        </el-form>




      <el-row >
        <router-link :to="{ name:'login'}">已有账号</router-link>
      </el-row>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm('editForm')" :loading="registering">注册</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>
<script type="text/ecmascript-6">
  import {UserDeptTree, register} from '../api/userMG'
  import { setCookie, getCookie, delCookie } from '../utils/util'
  import md5 from 'js-md5'
  export default {
    name: 'register',

    data() {
      return {
        deptdata: [],
        //定义loading默认为false
        registering:false,
        editForm: {
          //username和password默认为空
          username: '',
          password: '',
          // deo:'',
          // dept: '',
          name:'',
          phone:'',
          sex:'',
          mail:''
        },
        //rules前端验证
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          dept: [{ required: true, message: '请选择部门', trigger: 'blur' }],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
              required: true,
              message: '请输入正确的手机号',
              trigger: 'blur'
            }
          ],
          mail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
              required: true,
              message: '请输入正确的邮箱',
              trigger: 'blur'
            }
          ],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
        },
      }
    },
    // 创建完毕状态(里面是操作)
    created() {
      this.getDept()
      this.$message({
        message: '账号密码不为空即可',
        type: 'success'
      })

    },
    // 里面的函数只有调用才会执行
    methods: {
      getDept() {
        UserDeptTree()
          .then(res => {
            if (res.data.success) {
              this.deptdata = JSON.parse(res.data.data)/*this.changeArr(res.data.data)*/
              console.log(this.deptdata)
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              })
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('获取部门信息失败,请稍后再试！')
          })
      },
      //提交注册表单
      submitForm(formName) {
        this.registering=true
        this.$refs[formName].validate(valid => {
          if (valid) {
            register(this.editForm).then(res => {
              if (res.success) {
                //如果注册成功就让他跳转到登录页面
                setTimeout(() => {
                  this.$router.push({ path: '\\vueproject-master\\src\\view\\login.vue' }).catch(err => (""))
                })
              } else {
                this.registering=false
                this.$message.error(res.msg)
                return false
              }
            })
          }
        })
      },
    }
  }
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 100%;
  }
  .register-container {
    border-radius: 10px;
    margin: 2px auto;
    width:400px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }
  .code-box {
    text-align: right;
  }
  .codeimg {
    height: 40px;
  }
</style>
